//3.封装defineReactive函数，主要是为了对单个数据做数据劫持（数据劫持的核心代码）
function defineReactive(_data, key, value) {
  Object.defineProperty(_data, key, {
    get() {
      console.log("正在读取" + key + '的值');
      return value
    },
    set(newVal) {
      console.log('正在设置' + key + "的值");
      if (newVal === value) return
      value = newVal
    }
  })
}

//2.封装一个observe函数，接收_data,遍历_data的值，一个个的进行数据劫持
function observe(_data) {
  for (let key of Object.keys(_data)) {
    //把每一个数据的响应式核心代码交给defineReactive函数处理
    defineReactive(_data, key, _data[key])
  }
}

//1.封装一个Vue的构造函数
function Vue(options) {
  //把options配置对象内的data,放在实例对象this的_data属性上
  this._data = options.data
  //进行数据代理 把_data中的属性取出来,一个个放在Vue实例上
  for (let key of Object.keys(this._data)) {
    Object.defineProperty(this, key, {
      get() {
        console.log("被读取了");
        return this._data[key]
      },
      set(newVal) {
        console.log("被设置了", newVal);
        this._data[key] = newVal
      }
    })
  }
  //拿到_data的数据开始进行响应式操作，我们首先把响应式操作的代码放在observe函数中
  observe(this._data)
}


//实例化Vue
const vm = new Vue({
  data: {
    count: 1,
    course: {
      type: "easy",
      name: "vue",
    },
  },
})
console.log(vm);